<template>
	<view class="me-container">
	   <view class="avatar-container shadow">
		   <image class="imge-avater shadow"  :src="img" alt="" />
		    <view class="mo"></view>
	   </view>
	   <view class="user-list-container">
		   <view class="user-info shadow">
			  <view class="id-lable">
			  	  学号
			  </view>
			  <view class="id-value">
			  	{{ user.xh}}
			  </view>
		   </view>
		   <view class="user-info   shadow">
		   		<view class="id-lable">
		   			班级
		   		</view>
		   		<view class="id-value ">
		   			{{ user.bjmc }}
		   		</view>
		   </view>
		   <view class="user-info shadow">
				<view class="id-lable">
					 专业
				</view>
				<view class="id-value">
					{{ user.zymc }}
				</view>
			</view>
		   <view class="user-info shadow">
				<view class="id-lable">
						院系
				</view>
			    <view class="id-value">
					{{ user.xymc }}
				</view>
			</view>
			<view class="user-info shadow">
							<view class="id-lable">
									电量
							</view>
						    <view class="id-value">
								<view  v-if ='du'>
									{{ ` ${du}度  ${room.AU}-${room.RM}宿舍  ` }}
								</view>
								<navigator v-else  url="/pages/PRate/PRate" hover-class="navigator-hover">
									<text>点击获取电量</text>
								</navigator>
							</view>
						</view>
			<view class=" user-info  ">
				 <button type="primary" class="but-out shadow" @click="out" >退出登录</button>
			</view>
		   </view>
		   
	   </view>
	</view>
</template>

<script>
	import getPR from "@/u_api/getPRate.js"
	import img from '@/static/logo.png'
	import getUser from "@/u_api/getUserInfo.js"
	export default {
		data() {
			return {
				img,
				user:{
					bjmc: null,
					xh: null,
					xymc: null,
					zymc:null,
					xm:null
				},
				room:{
					ROOMID:null,
					AU:null,
					RM:null
				},
				du:null
				
			};
		},
		beforeCreate(){
			uni.intercept();
		},
		async onLoad(){
			
			let userInfo = uni.getStorageSync('userInfo')
			if(!userInfo){
				userInfo = await getUser.getUserInfo();
				uni.setStorageSync('userInfo',userInfo);
			}
			
			this.forEachUser(userInfo)
			this.setRoomInfo();
			
			
			
		},
		methods:{
			out(){
				uni.clearStorageSync();
				uni.navigateTo({
					url:"/pages/login/login"
				})
			},
			forEachUser(userInfo){
				for(let i in this.user){
					this.user[i] = userInfo[i]
				}
			},
			setRoomInfo(){
				 const PR = uni.getStorageSync('PRateInfo');
				if(!PR) return;
				for(let i in this.room){
					if(PR[i].value)
						this.room[i] = PR[i].value
					else
						this.room[i] = PR[i]
				}
				this.getPRDu()
			},
			async getPRDu(){
			   const PR  = await getPR.getPRate(this.room.ROOMID);
			   this.du = PR.remainPower;
			    
			}
		}
	}
</script>

<style lang="scss">
.me-container{
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;
	
	
	
}
.avatar-container{
	width: 100%;
	position: relative;
	height: 40%;
	box-sizing: border-box;
	background-size: 100% 100% ;
	background-image: url("@/static/asset/nfbg.jpg");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	border-radius: 10rpx;
	
	// backdrop-filter: 12px;
	// filter: blur(4px);
	
	
}
.imge-avater{
	z-index: 8;
	width: 150px;
	height: 150px;
	position: absolute;
	left: 50%;
	top:50%;
	border-radius: 50%;
	transform: translate(-50%,-50%);
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.6);
}
.mo{
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0);
	top: 0;
	backdrop-filter: blur(2px);
}

.user-list-container{
	flex: 1 1;
    // background-color: #f0f0f0;
}
.user-info{
	display: flex;
	height: 40px;
	width: 95%;
	padding: 5px 2px;
	background-color: #fff;
	transform: translateX(2.5%);
	position: relative;
	margin-top: 10px;
	align-items: center;
	border-radius: 10px;
}
.id-lable{
	width: 20%;
	padding: 10rpx;
	flex-shrink: 1;
	text-align: center;
	font-weight: 700;
}
.id-value{
	flex: 1 1 ;
	
}
.shadow{
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.2);
}
.but-out{
    width: 100%;
	border-radius: 10px;
}
</style>
